<template>
  <PageWrapper contentClass="flex" contentFullHeight dense fixedHeight>
    <a-card>
      <div style="margin-bottom: 20px">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.log.taskName')">
                <a-input
                  allowClear
                  :placeholder="t('sys.form.placeholder.taskName')"
                  v-model:value="formState.name"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.analysis.columns.liststatus')">
                <a-select
                  :placeholder="t('sys.form.placeholder.status')"
                  allowClear
                  v-model:value="formState.listStatus"
                >
                  <a-select-option
                    v-for="(item, index) in listStatusList"
                    :key="index"
                    :value="item.value"
                    >{{ item.title }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.analysis.columns.detailStatus')">
                <a-select
                  :placeholder="t('sys.form.placeholder.status')"
                  allowClear
                  v-model:value="formState.detailStatus"
                >
                  <a-select-option
                    v-for="(item, index) in statudetailsList"
                    :key="index"
                    :value="item.value"
                    >{{ item.title }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-space>
                <a-button :icon="h(SearchOutlined)" @click="queryRef" type="primary">
                  {{ t('sys.form.placeholder.inquire') }}
                </a-button>
                <a-button @click="addClcick" :icon="h(PlusOutlined)" type="primary">
                  {{ t('sys.configuration.add') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-alert class="mb-2 mt-2" show-icon type="info">
        <template #message>
          <div>
            <span>
              <div>
                <div class="ml-2">
                  {{ t('sys.statistics1.dataining') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifoData.allCount }}
                  <span class="hover-change-color" style="cursor: pointer" @click="handleClick(0)">
                    {{ t('sys.configuration.hasnotProgress') }}:
                  </span>

                  <span class="text-red-500">
                    {{ StatisticsInifoData.stopCount }}
                  </span>
                  <span class="hover-change-color" style="cursor: pointer" @click="handleClick(1)">
                    {{ t('sys.configuration.inService') }}:
                  </span>

                  <span class="text-green-500">
                    {{ StatisticsInifoData.runingCount }}
                  </span>
                  <span class="hover-change-color" style="cursor: pointer" @click="handleClick(3)">
                    {{ t('sys.configuration.waiting') }}:
                  </span>
                  <span class="text-orange-500">
                    {{ StatisticsInifoData.waitCount }}
                  </span>
                  <span class="hover-change-color" style="cursor: pointer" @click="handleClick(2)">
                    {{ t('sys.statistics1.Listcompleted') }}:
                  </span>

                  <span class="text-green-500">
                    {{ StatisticsInifoData.completeCount }}
                  </span>

                  {{ t('sys.statistics1.datadeficiencies') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifoData.dataLackCount }}
                  </span>
                </div>
              </div>
            </span>
          </div>
        </template>
      </a-alert>
      <a-table
        @change="handleTableChange"
        :pagination="pagination"
        :loading="loading"
        bordered
        :scroll="{ x: 1500 }"
        :columns="columns"
        :dataSource="dataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button @click="drawerBoxClick(record)" type="link">{{
              t('sys.analysis.everyrecord')
            }}</a-button>
            <a-popconfirm
              @confirm="Taskconfirm(record)"
              :title="t('sys.configuration.IsDelete')"
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'taskcount'">
            <a-button @click="drawerTaskcountBoxClick(record)" type="link"
              >{{ record.useCount ? record.useCount : 0 }}/{{
                record.count ? record.count : '0'
              }}</a-button
            >
          </template>
          <template v-if="column.dataIndex === 'detailStatus'">
            <a-tag v-if="record.detailStatus == 0" color="red">{{
              t('sys.configuration.hasnotProgress')
            }}</a-tag>
            <a-tag v-if="record.detailStatus == 1" color="green">{{
              t('sys.configuration.inService')
            }}</a-tag>
            <a-tag v-if="record.detailStatus == 2" color="orange">{{
              t('sys.configuration.waiting')
            }}</a-tag>
            <a-popconfirm
              v-if="record.detailStatus == 0"
              @confirm="TaskconfirmDetalisStop(record, 1)"
              :title="
                t('sys.configuration.IS') +
                t('sys.configuration.start') +
                t('sys.configuration.stopEveryDetails')
              "
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.configuration.start') }}
              </a-button>
            </a-popconfirm>
            <a-popconfirm
              v-else
              @confirm="TaskconfirmDetalisStop(record, 2)"
              :title="
                t('sys.configuration.IS') +
                t('sys.configuration.cease') +
                t('sys.configuration.stopEveryDetails')
              "
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.configuration.cease') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'listStatus'">
            <a-tag v-if="record.listStatus == 0" color="red">{{
              t('sys.configuration.hasnotProgress') + '(' + record.listStopReason + ')'
            }}</a-tag>
            <a-tag v-if="record.listStatus == 2" color="orange">{{
              t('sys.configuration.waiting')
            }}</a-tag>
            <a-tag v-if="record.listStatus == 1" color="green">{{
              t('sys.configuration.inService')
            }}</a-tag>
            <a-popconfirm
              v-if="record.listStatus == 0"
              @confirm="TaskconfirmStop(record, 1)"
              :title="
                t('sys.configuration.IS') +
                t('sys.configuration.start') +
                t('sys.configuration.stopEvery')
              "
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.configuration.start') }}
              </a-button>
            </a-popconfirm>
            <a-popconfirm
              v-else
              @confirm="TaskconfirmStop(record, 2)"
              :title="
                t('sys.configuration.IS') +
                t('sys.configuration.cease') +
                t('sys.configuration.stopEvery')
              "
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.configuration.cease') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'windowCount'">
            <a-button @click="drawerTaskNumBoxClick(record)" type="link"
              >{{ record.useWindowCount ? useWindowCount : '0' }}/{{
                record.windowCount ? record.windowCount : '0'
              }}</a-button
            >
          </template>
        </template>
      </a-table>
    </a-card>
    <a-drawer
      v-model:open="DrawerShow"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      :size="'large'"
      title="新增"
      placement="right"
    >
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 10 }"
        autocomplete="off"
        @finish="onFinish"
      >
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item
              :label="t('sys.userlist.columns.taskMaxNum')"
              name="count"
              :rules="[
                {
                  required: true,
                  message:
                    t('sys.configuration.pleaseenter') + t('sys.userlist.columns.taskMaxNum'),
                },
              ]"
            >
              <a-input-number v-model:value="formState.count" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              name="windowCount"
              :rules="[
                {
                  required: true,
                  message:
                    t('sys.configuration.pleaseenter') + t('sys.userlist.columns.windowCount'),
                },
              ]"
              :label="t('sys.userlist.columns.windowCount')"
            >
              <a-input-number v-model:value="formState.windowCount" />
            </a-form-item>
          </a-col>
        </a-row>

        <div class="m-t-10px m-b-10px"> 筛选规则 </div>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item :label="t('sys.script.columns.name')" name="name">
              <a-input v-model:value="formState.name" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('sys.accountList.city')" name="city">
              <a-input v-model:value="formState.city" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('sys.accountList.work')" name="work">
              <a-input v-model:value="formState.work" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('sys.accountList.school')" name="school">
              <a-input v-model:value="formState.school" />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="m-t-10px m-b-10px"> 采集条件 </div>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="24">
            <a-form-item :label-col="{ span: 5 }" :label="'粉丝数'" name="friend">
              <a-row :gutter="20" style="display: flex; align-items: center">
                <a-col :span="3"> 最少(0) </a-col>
                <a-col :span="6"> <a-input-number v-model:value="formState.minFriend" /> </a-col>
                <a-col :span="3"> 最多 </a-col>
                <a-col :span="6"> <a-input-number v-model:value="formState.maxFriend" /> </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :label-col="{ span: 5 }" :label="'最后发帖'" name="city">
              <a-row :gutter="6" style="display: flex; align-items: center">
                <a-col :span="2">至今</a-col>
                <a-col :span="3"> <a-input v-model:value="formState.activeDays" /> </a-col>
                <a-col :span="3"> 天以内 </a-col>
              </a-row>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-row :gutter="20">
          <a-col :span="24">
            <a-form-item :label-col="{ span: 24 }" :label="' prompt规则,可以自定义'">
              <a-row :gutter="[20, 20]" style="display: flex; align-items: center">
                <a-col
                  :key="value"
                  v-for="(key, value, index) in frompropLIST"
                  class="flex items-center"
                  :span="24"
                >
                  <PlusOutlined
                    v-if="index === Object.keys(frompropLIST).length - 1"
                    class="mr-[10px]"
                    @click="addFriend(index)"
                  />
                  <MinusOutlined
                    v-if="index != Object.keys(frompropLIST).length - 1"
                    class="mr-[10px]"
                    @click="deleteFriend(value)"
                  />
                  <a-input
                    @input="console.log(value)"
                    v-model:value="frompropLIST[value]"
                    placeholder="请输入"
                  />
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button type="primary" html-type="submit">{{
            t('sys.configuration.confirm')
          }}</a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
    <a-drawer
      v-model:open="DrawerDetalsShow"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      :size="'large'"
      :title="t('sys.script.details')"
      placement="right"
    >
      <a-form name="basic" :layout="'vertical'" autocomplete="off">
        <a-descriptions bordered :title="t('sys.script.essential')">
          <a-descriptions-item :label="t('sys.script.username')">{{
            formDetails.name
          }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.script.avatar')">
            <a-image width="50px" height="50px" :src="formDetails.avatarUrl" />
          </a-descriptions-item>
          <a-descriptions-item :label="t('sys.configuration.describe')">{{
            formDetails.other
          }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.script.friend')">
            {{ formDetails.header }}位
          </a-descriptions-item>
          <a-descriptions-item :label="t('sys.script.maritalstatus')">
            {{ formDetails.profile }}</a-descriptions-item
          >
        </a-descriptions>
        <a-form-item :label="t('sys.video.columns.Photo')">
          <a-row :gutter="[20, 20]">
            <a-col
              v-for="(item, index) in formDetails.photoList"
              :key="index"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="4"
            >
              <CardItem :imagesrc="item" :imageText="formDetails.photosDescriptionList[index]" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item :label="t('sys.video.columns.invitation')" name="work">
          <a-row :gutter="[20, 20]">
            <a-col
              v-for="(item, index) in formDetails.postList"
              :key="index"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="4"
            >
              <CardItem :imagesrc="item" :imageText="formDetails.postsDescriptionList[index]" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item name="work">
          <a-popconfirm
            @confirm="gatherdetalsTaskconfirm"
            :title="t('sys.configuration.IsDelete')"
            :ok-text="t('sys.configuration.comfig')"
            :cancel-text="t('sys.configuration.cancel')"
          >
            <a-button danger type="primary"> {{ t('sys.configuration.delete') }} </a-button>
          </a-popconfirm>
        </a-form-item>
      </a-form>
    </a-drawer>
    <a-modal
      bordered
      width="80%"
      v-model:open="gatherShow"
      :title="t('sys.analysis.everyrecord')"
      centered
      @ok="gatherShow = false"
    >
      <a-alert class="mb-2 mt-2" show-icon type="info">
        <template #message>
          <div>
            <span>
              <div>
                <div class="ml-2">
                  {{ t('sys.statistics1.Remaining') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.detail.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.detail.allCount - StatisticsInifo.detail.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.detail.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.detail.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.detail.allCount -
                      StatisticsInifo.detail.passCount -
                      StatisticsInifo.detail.remainCount
                    }}
                  </span>
                </div>
                <div class="ml-2">
                  {{ t('sys.statistics1.Report') }} : {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.process.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.process.allCount - StatisticsInifo.process.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.process.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.process.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.process.allCount -
                      StatisticsInifo.process.passCount -
                      StatisticsInifo.process.remainCount
                    }}
                  </span>
                </div>
                <div class="ml-2">
                  {{ t('sys.statistics1.collectedDetails') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.avator.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.avator.allCount - StatisticsInifo.avator.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.avator.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.avator.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.avator.allCount -
                      StatisticsInifo.avator.passCount -
                      StatisticsInifo.avator.remainCount
                    }}
                  </span>
                </div>
                <div class="ml-2">
                  {{ t('sys.statistics1.collectedDetailsExplain') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.image.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.image.allCount - StatisticsInifo.image.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.image.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.image.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.image.allCount -
                      StatisticsInifo.image.passCount -
                      StatisticsInifo.image.remainCount
                    }}
                  </span>
                </div>
              </div>
            </span>
          </div>
        </template>
      </a-alert>
      <a-table
        :scroll="{ x: 1500, y: 700 }"
        @change="gatherhandleTableChange"
        :pagination="gatherpagination"
        :columns="gathercolumns"
        :dataSource="gatherdataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'node'"> 节点{{ record.id }} </template>
          <template v-if="column.dataIndex === 'type'">
            <a-tag color="green"> 正常 </a-tag>
          </template>
          <template v-if="column.dataIndex === 'imageProcessStatus'">
            <a-tag
              v-if="record.detailStatus == 1 && record.imageProcessStatus == -1"
              color="orange"
            >
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag
              v-else-if="record.detailStatus == 1 && record.imageProcessStatus == 0"
              color="blue"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess8') }}
            </a-tag>
            <a-tag
              v-else-if="record.detailStatus == 1 && record.imageProcessStatus == 1"
              color="error"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>

            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'detailStatus'">
            <a-tooltip placement="top" trigger="click">
              <template #title>
                <p>
                  header :
                  {{
                    record.header != null && record.header != '' && record.header != -1
                      ? 'true'
                      : 'false'
                  }}
                </p>
                <p>
                  profile :{{
                    record.profile != null && record.profile != '' && record.profile != -1
                      ? 'true'
                      : 'false'
                  }}
                </p>
                <p>
                  photos :
                  {{ record.photoCount > 0 ? record.photoCount : 'false' }}</p
                >
                <p>
                  post :
                  {{ record.postCount > 0 ? record.postCount : 'false' }}</p
                >
              </template>
              <a-tag v-if="record.detailStatus == 0" color="green">
                {{ t('sys.configuration.taskprocess2') }}
              </a-tag>
              <a-tag v-else-if="record.detailStatus == 1" color="blue">
                {{ t('sys.configuration.taskprocess1') }}
              </a-tag>
              <a-tag v-else-if="record.detailStatus == -1" color="orange">
                {{ t('sys.configuration.taskprocess4') }}
              </a-tag>
              <a-tag v-else-if="record.detailStatus == 2" color="error">
                {{ t('sys.configuration.taskprocess9') }}
              </a-tag>
              <!-- <a-tag color="red" v-else-if="record.infoStage == 3">
                {{ t('sys.configuration.infoStage3') }}
              </a-tag>
              <a-tag v-else-if="record.infoStage == 4">
                {{ t('sys.configuration.infoStage1') }}
              </a-tag>
              <a-tag v-else-if="record.infoStage == 5">
                {{ t('sys.configuration.infoStage2') }}
              </a-tag> -->
              <span v-else></span>
            </a-tooltip>
            <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              cancel-text="No"
              ok-text="Yes"
              @confirm="forgetClcick('detailStatus', record)"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'avatorStatus'">
            <a-tag
              v-if="record.imageProcessStatus == 0 && record.avatorStatus == -1"
              color="orange"
            >
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag
              v-else-if="record.imageProcessStatus == 0 && record.avatorStatus == 0"
              color="green"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess2') }}
            </a-tag>
            <a-tag
              v-else-if="record.imageProcessStatus == 0 && record.avatorStatus == 1"
              color="blue"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess8') }}
            </a-tag>
            <a-tag
              v-else-if="record.imageProcessStatus == 0 && record.avatorStatus == 2"
              color="error"
            >
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'dataSource'">
            <a-tag v-if="record.dataSource == 1" color="orange">
              {{ t('sys.userlist.dataSourceType.1') }}
            </a-tag>
            <a-tag v-else-if="record.dataSource == 2" color="blue">
              {{ t('sys.userlist.dataSourceType.2') }}
            </a-tag>
            <a-tag v-else-if="record.dataSource == 3" color="green">
              {{ t('sys.userlist.dataSourceType.3') }}
            </a-tag>
            <span v-else></span>
          </template>

          <template v-if="column.dataIndex === 'imageStatus'">
            <a-tag v-if="record.avatorStatus == 1 && record.imageStatus == 1" color="blue">
              {{ t('sys.configuration.taskprocess1') }}
            </a-tag>
            <a-tag v-else-if="record.avatorStatus == 1 && record.imageStatus == -1" color="orange">
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag v-else-if="record.avatorStatus == 1 && record.imageStatus == 2" color="error">
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>
            <span v-else></span>
            <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              cancel-text="No"
              ok-text="Yes"
              @confirm="forgetClcick('imageStatus', record)"
            >
              <a-button v-if="record.avatorStatus == 1" class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'analyzeStatus'">
            <a-tag v-if="record.imageStatus == 1 && record.analyzeStatus == 0" color="green">
              {{ t('sys.configuration.taskprocess2') }}
            </a-tag>
            <a-tag v-else-if="record.imageStatus == 1 && record.analyzeStatus == 1" color="blue">
              {{ t('sys.configuration.taskprocess1') }}
            </a-tag>
            <a-tag v-else-if="record.imageStatus == 1 && record.analyzeStatus == -1" color="orange">
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag v-else-if="record.imageStatus == 1 && record.analyzeStatus == 2" color="error">
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>
            <span v-else></span>
            <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              cancel-text="No"
              ok-text="Yes"
              @confirm="forgetClcick('analyzeStage', record)"
            >
              <a-button v-if="record.imageStatus == 1" class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'stateStatus'">
            <a-tooltip placement="top" trigger="hover">
              <template v-if="record.stateStatus != 0 && record.stateStatus != 101" #title>
                <p>
                  {{ t('sys.userlist.Statusreason') }} : {{ record.stateRalevance }},{{
                    record.stateRalevanceId
                  }}
                </p>
              </template>
              <template v-if="record.stateStatus == 101" #title>
                <p>
                  {{ t('sys.userlist.Statusreasontermination') }} :
                  {{
                    record.endMessage != null
                      ? record.endMessage
                      : record.detailStopReason != null
                        ? record.detailStopReason
                        : record.imageProcessStopReason != null
                          ? record.imageProcessStopReason
                          : record.avatorDesc != null
                            ? record.avatorDesc
                            : record.imageStopReason != null
                              ? record.imageStopReason
                              : ''
                  }}</p
                >
              </template>
              <span
                v-for="(item, index) in statusTypeList"
                v-if="record.imageStatus != 101 && record.imageStatus != 0"
                :key="index"
              >
                <a-tag
                  v-if="record.imageStatus == 1 && item.value == record.stateStatus"
                  color="blue"
                >
                  {{ item.title }}
                </a-tag>
                <span v-else></span>
              </span>
              <a-tag v-if="record.stateStatus == 101" color="error">
                {{ t('sys.configuration.taskprocess11') }}
              </a-tag>
            </a-tooltip>
            <!-- <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              ok-text="Yes"
              cancel-text="No"
              @confirm="forgetClcick('state', record)"
            >
              <a-button v-if="record.imageStatus != 2" class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm> -->
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-button @click="drawerDetalisBoxClick(record)" type="link">
              {{ t('sys.configuration.particulars') }}
            </a-button>
            <a-popconfirm
              @confirm="gatherTaskconfirm(record)"
              :title="t('sys.configuration.IsDelete')"
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      bordered
      width="80%"
      v-model:open="drawerTaskNum"
      title="窗口列表"
      centered
      @ok="drawerTaskNum = false"
    >
      <a-table
        :scroll="{ x: 1000, y: 700 }"
        @change="gatherhandleTableChange"
        :pagination="gatherpagination"
        :columns="configTaskNumcolumns"
        :dataSource="gatherTaskNumdataSourcm"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status == 0" color="orange">{{
              t('sys.configuration.notProgress')
            }}</a-tag>
            <a-tag v-if="record.status == 1" color="green">{{
              t('sys.configuration.inServiceover')
            }}</a-tag>
            <a-tag v-if="record.status == 2" color="cyan">{{
              t('sys.configuration.inService')
            }}</a-tag>
          </template>
          <template v-if="column.dataIndex === 'options'">
            <a-button v-if="record.status == 2" type="link">{{
              t('sys.configuration.stop')
            }}</a-button>
            <a-button v-if="record.status == 0 || record.status == 1" type="link">{{
              t('sys.configuration.Progress')
            }}</a-button>
            <a-popconfirm
              :title="t('sys.configuration.IsDelete')"
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      bordered
      width="80%"
      v-model:open="drawerTaskcount"
      title="任务上限列表"
      centered
      @ok="drawerTaskcount = false"
    >
      <a-table
        :scroll="{ x: 1000, y: 700 }"
        @change="gatherhandleTableChange"
        :pagination="gatherpagination"
        :columns="configTaskcountcolumns"
        :dataSource="gatherTaskcountdataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status == 0" color="orange">{{
              t('sys.configuration.notProgress')
            }}</a-tag>
            <a-tag v-if="record.status == 1" color="green">{{
              t('sys.configuration.inServiceover')
            }}</a-tag>
            <a-tag v-if="record.status == 2" color="cyan">{{
              t('sys.configuration.inService')
            }}</a-tag>
          </template>
          <template v-if="column.dataIndex === 'options'">
            <a-button v-if="record.status == 2" type="link">{{
              t('sys.configuration.stop')
            }}</a-button>
            <a-button v-if="record.status == 0 || record.status == 1" type="link">{{
              t('sys.configuration.Progress')
            }}</a-button>

            <a-popconfirm
              :title="t('sys.configuration.IsDelete')"
              :ok-text="t('sys.configuration.comfig')"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-modal>
  </PageWrapper>
</template>

<script setup>
  import { onMounted, ref, computed, h } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    posttaskpage,
    posttasksave,
    postUserListPage,
    taskstatistics,
    deleteTask,
    getStatistics,
    posttaskupdate,
    deletelistTask,
  } from '@/api/demo/device';
  import { message } from 'ant-design-vue';
  import {
    configTaskNumcolumns,
    gatherTaskNumdataSourcm,
    configTaskcountcolumns,
    gatherTaskcountdataSource,
  } from './account.data';
  import CardItem from '@/views/demo/newMenu/compunt/cardItem.vue';
  import { PlusOutlined, SearchOutlined, MinusOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { v } from 'vxe-table';

  const { t } = useI18n();
  const dataSource = ref([]);
  const router = useRouter();
  const StatisticsInifoData = ref({
    allCount: 0,
    stopCount: 0,
    runingCount: 0,
    completeCount: 0,
    dataLackCount: 0,
  });
  const StatisticsInifo = ref({
    detail: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
    process: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
    avator: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
    image: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
  });
  const columns = ref([
    {
      title: 'ID',
      dataIndex: 'taskId',
      key: 'taskId',
      width: 150,
    },
    {
      title: t('sys.script.columns.name'),
      dataIndex: 'name',
      key: 'name',
      width: 150,
    },
    {
      title: t('sys.accountList.school'),
      dataIndex: 'school',
      key: 'school',
      width: 150,
    },
    {
      title: t('sys.accountList.windowCount'),
      dataIndex: 'windowCount',
      key: 'windowCount',
      width: 150,
    },
    {
      title: t('sys.accountList.taskcount'),
      dataIndex: 'taskcount',
      key: 'taskcount',
      width: 150,
    },
    {
      title: t('sys.accountList.work'),
      dataIndex: 'work',
      key: 'work',
      width: 150,
    },
    {
      title: t('sys.accountList.city'),
      dataIndex: 'city',
      key: 'city',
      width: 150,
    },
    {
      title: t('sys.analysis.columns.liststatus'),
      dataIndex: 'listStatus',
      key: 'listStatus',
      width: 200,
    },
    {
      title: t('sys.analysis.columns.detailStatus'),
      dataIndex: 'detailStatus',
      key: 'detailStatus',
      width: 150,
    },
    {
      title: t('sys.informaionMatchaing.columns.createTime'),
      dataIndex: 'createTime',
      key: 'createTime',
      width: 150,
    },
    {
      title: t('sys.script.columns.creadTime'),
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: 150,
    },
    {
      title: t('sys.configuration.action'),
      dataIndex: 'operation',
      key: 'operation',
      width: 400,
    },
  ]);
  // const basePage = ref({
  //   current: 1,
  //   size: 10,
  // });
  const gatherdataSource = ref([]);
  const gathercolumns = ref([
    {
      title: t('sys.userlist.columns.taskId'),
      dataIndex: 'taskId',
      key: 'taskId',
      width: 200,
    },
    {
      title: t('sys.userlist.columns.taskprocess2'),
      dataIndex: 'detailStatus',
      minWidth: 180,
    },
    {
      title: t('sys.userlist.columns.imageProcessStatus'),
      dataIndex: 'imageProcessStatus',
      minWidth: 180,
    },
    {
      title: t('sys.userlist.columns.avatorStatus'),
      dataIndex: 'avatorStatus',
      minWidth: 180,
    },
    {
      title: t('sys.userlist.columns.taskprocess5'),
      dataIndex: 'stateStatus',
      minWidth: 180,
    },
    // {
    //   title: t('sys.accountList.curretstatus'),
    //   dataIndex: 'type',
    //   key: 'type',
    //   width: 150,
    // },
    {
      title: t('sys.userlist.columns.dataSource'),
      dataIndex: 'dataSource',
      minWidth: 120,
    },
    // {
    //   title: t('sys.accountList.exceptionRecord'),
    //   dataIndex: 'exceptionRecord',
    //   key: 'exceptionRecord',
    //   width: 150,
    // },
    {
      title: t('sys.configuration.action'),
      dataIndex: 'operation',
      key: 'operation',
    },
  ]);
  const DrawerDetalsShow = ref(false);
  const gatherbasePage = ref({
    current: 1,
    size: 10,
  });
  const statusTypeList = ref([
    {
      title: t('sys.userlist.selectType.title1'),
      value: 0,
    },
    {
      title: t('sys.userlist.selectType.title2'),
      value: 1,
    },
    {
      title: t('sys.userlist.selectType.title3'),
      value: 2,
    },
    {
      title: t('sys.userlist.selectType.title4'),
      value: 3,
    },
    {
      title: t('sys.userlist.selectType.title5'),
      value: 4,
    },
    {
      title: t('sys.userlist.selectType.title6'),
      value: 5,
    },
    {
      title: t('sys.userlist.selectType.title7'),
      value: 6,
    },
    {
      title: t('sys.userlist.selectType.title8'),
      value: 7,
    },
    {
      title: t('sys.userlist.selectType.title9'),
      value: 8,
    },
  ]);
  const handleClick = (it) => {
    if (it == 0) {
      formState.value.listStatus = 0;
    } else if (it == 1) {
      formState.value.listStatus = 1;
    } else if (it == 2) {
      formState.value.listStatus = 3;
    } else if (it == 3) {
      formState.value.listStatus = 2;
    } else if (it == 4) {
      formState.value.listStatus = 4;
    }
    init();
  };
  const frompropLIST = ref({
    prompt0: '',
  });
  const addFriend = (index) => {
    // 检查 frompropLIST 和 frompropLIST.value 是否存在
    if (!frompropLIST.value || !frompropLIST.value) {
      console.error('frompropLIST 未正确初始化');
      return;
    }

    // 获取当前对象的所有键
    const keys = Object.keys(frompropLIST.value);

    // 确保键名唯一性：使用当前最大索引+1来创建新键，而不是依赖传入的index
    const maxIndex = keys.reduce((max, key) => {
      const num = parseInt(key.replace('prompt', ''));
      return isNaN(num) ? max : Math.max(max, num);
    }, 0);

    // 创建新的键名
    const newKey = `prompt${maxIndex + 1}`;

    // 添加新的空值字段
    frompropLIST.value[newKey] = '';

    // 强制触发响应式更新（在某些复杂场景下可能需要）
    // 这行代码在大多数情况下不是必需的，但可以确保UI正确更新
  };
  const formDetails = ref({});
  const loading = ref(true);
  const gatherloading = ref(true);
  const formState = ref({});
  const DrawerShow = ref(false);
  const drawerTaskcount = ref(false);
  const drawerTaskNum = ref(false);
  const gatherShow = ref(false);
  const gatherTaskId = ref(null);
  const gatherdetalsTaskconfirm = () => {
    deletelistTask(formDetails.value.id).then((res) => {
      if (res.code == 200) {
        message.success('删除详情成功');
        DrawerDetalsShow.value = false;
        list();
      }
    });
  };
  const deleteFriend = (key) => {
    // 检查 frompropLIST 和 frompropLIST.value 是否存在
    if (!frompropLIST.value || !frompropLIST.value) {
      console.error('frompropLIST 未正确初始化');
      return;
    }

    // 检查要删除的键是否存在
    if (Object.prototype.hasOwnProperty.call(frompropLIST.value, key)) {
      // 删除对应的 key 字段
      delete frompropLIST.value[key];

      // 强制触发响应式更新
      frompropLIST.value = { ...frompropLIST.value };
    } else {
      console.warn(`要删除的键 ${key} 不存在`);
    }
  };
  const drawerTaskcountBoxClick = (e) => {
    // drawerTaskcount.value = true;
    router.push({
      path: '/userList',
      query: {
        taskId: e.taskId,
      },
    });
  };
  const drawerTaskNumBoxClick = (e) => {
    drawerTaskNum.value = true;
  };
  const addClcick = () => {
    DrawerShow.value = true;
    frompropLIST.value = {
      prompt0: '',
    };
  };
  const Taskconfirm = (e) => {
    deleteTask(e.id).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.configuration.deleteSucces'));
        init();
      }
    });
  };

  const TaskconfirmStop = (e, it) => {
    let params = {};
    if (it == 1) {
      params = {
        id: e.id,
        listStatus: 1,
      };
    } else {
      params = {
        id: e.id,
        listStatus: 0,
      };
    }

    posttaskupdate(params).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        init();
      }
    });
  };
  const TaskconfirmDetalisStop = (e, it) => {
    let params = {};
    if (it == 1) {
      params = {
        id: e.id,
        detailStatus: 1,
      };
    } else {
      params = {
        id: e.id,
        detailStatus: 0,
      };
    }

    posttaskupdate(params).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        init();
      }
    });
  };
  const gatherTaskconfirm = (e) => {
    deletelistTask(e.id).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.configuration.deleteSucces'));
        list();
      }
    });
  };
  const drawerDetalisBoxClick = (e) => {
    // 跳转userList页面
    gatherShow.value = false;
    router.push({
      path: '/userList',
      query: {
        userId: e.taskId,
      },
    });
    // gettaskuserinfo(e.taskId).then((res) => {
    //   if (res.code == 200) {
    //     DrawerDetalsShow.value = true;
    //     if (res.data) {
    //       formDetails.value = res.data;
    //     } else {
    //       message.warning('暂无数据');
    //     }
    //   }
    // });
  };
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const gatherpagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const onFinish = (values) => {
    console.log(values, frompropLIST.value);
    formState.value.prompt = JSON.stringify(frompropLIST.value);
    posttasksave(formState.value).then((res) => {
      if (res.code == 200) {
        DrawerShow.value = false;
        formState.value = {};
        message.success('新增任务成功');
        init();
      }
    });
  };
  const rolesList = ref({});
  const rolesListID = ref(null);
  const drawerBoxClick = (record) => {
    gatherShow.value = true;
    gatherTaskId.value = record.taskId;

    list();
  };
  const list = () => {
    gatherloading.value = true;
    postUserListPage({
      superTaskId: gatherTaskId.value,
      size: gatherpagination.value.pageSize,
      current: gatherpagination.value.current,
    }).then((res) => {
      if (res.code == 200) {
        gatherdataSource.value = res.data.records;
        gatherpagination.value.total = res.data.total;
      }
    });
  };
  const handleTableChange = (e) => {
    pagination.value = e;
    init();
  };
  const gatherhandleTableChange = (e) => {
    gatherpagination.value = e;
    list();
  };
  const queryRef = () => {
    pagination.value.current = 1;
    init();
  };
  const init = () => {
    loading.value = true;
    posttaskpage({
      size: pagination.value.pageSize,
      current: pagination.value.current,
      ...formState.value,
    }).then((res) => {
      if (res.code == 200) {
        dataSource.value = res.data.records;
        pagination.value.total = res.data.total;
        loading.value = false;
      }
    });
    rolesList.value = JSON.parse(localStorage.getItem('rolesList'));
    rolesListID.value = rolesList.value.find((item) => item.roleId === 1);

    if (rolesListID.value) {
      gathercolumns.value.splice(4, 0, {
        title: t('sys.userlist.columns.taskprocess3'),
        dataIndex: 'imageStatus',
        minWidth: 180,
      });
    }
    taskstatistics().then((res) => {
      if (res.code == 200) {
        StatisticsInifoData.value = res.data;
      }
    });
  };
  const statudetailsList = ref([
    {
      title: t('sys.configuration.hasnotProgress'),
      value: 0,
    },
    {
      title: t('sys.configuration.inService'),
      value: 1,
    },
    {
      title: t('sys.configuration.waiting'),
      value: 2,
    },
  ]);
  const listStatusList = ref([
    {
      title: t('sys.configuration.hasnotProgress'),
      value: 0,
    },
    {
      title: t('sys.configuration.inService'),
      value: 1,
    },
    {
      title: t('sys.configuration.waiting'),
      value: 2,
    },
    {
      title: t('sys.configuration.listsucces'),
      value: 3,
    },
    {
      title: t('sys.configuration.datadeficiencies'),
      value: 4,
    },
  ]);
  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped>
  .hover-change-color:hover {
    color: #1890ff; /* 这是Ant Design默认的主色调蓝色 */
    text-decoration: underline; /* 可选：添加下划线增强视觉反馈 */
  }
</style>
